<template>
  <view class="rate-container">
    <view class="rate-container__item" v-for="item in props.count" :key="item" @click="rateValue = item">
      <IconFont
        :name="item <= modelValue ? 'star-fill-n' : 'star-n'"
        :size="props.size"
        :color="item <= modelValue ? props.activeColor : props.color"
      ></IconFont>
    </view>

    <view class="rate-container__label">
      <slot name="right-label" />
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  modelValue: {
    type: [Number, String],
    default: 0,
  },
  count: {
    // 评分总数
    type: Number,
    default: 5,
  },
  size: {
    // 评分大小
    type: Number,
    default: 24,
  },
  color: {
    // 评分颜色
    type: String,
    default: "#ecf5ff",
  },
  activeColor: {
    // 评分选中颜色
    type: String,
    default: "#F2994A",
  },
});

const emit = defineEmits(["change", "update:modelValue"]);

const rateValue = ref(props.modelValue);

watch(
  () => rateValue.value,
  (value) => {
    emit("change", value);
    emit("update:modelValue", value);
  }
);

watch(
  () => props.modelValue,
  (value) => {
    rateValue.value = value;
  }
);
</script>

<style lang="scss">
.rate-container {
  display: flex;
  align-items: center;

  &__item {
    margin-right: 6px;
  }

  &_label {
    font-size: 12px;
    color: #666;
  }
}
</style>
